<template>
  <div class="container-goods">
    <ul class="goods-list">
      <li class="list-item"
          v-for="(item, index) in goods_list"
          :key="index"
          @tap="doc_detail(item)">
        <div class="goods_deatails">
          <div class="left">
            <!-- 项目图片 -->
            <div class="goods-logo">
              <img :src="img_url+item.thumb_image"
                   v-if="img_url&&item.thumb_image"
                   alt
                   class="img" />
            </div>
            <div class="tip"
                 v-if="item.activity_status<3">
              {{item.activity_status==1?'即将开抢':''}}
              {{item.activity_status==2?'抢购中':''}}
            </div>
          </div>
          <div class="info">
            <div class="goods-name">
              <span v-if="item.cross_border == 1"
                    class="icon"></span>
              {{item.title}}
            </div>
            <div class="price-right">销量{{item.sales_num}}</div>
            <div class="price">
              <div class="price-left">
                <span style="display:flex;align-items: flex-end;">
                  <span class="icon"
                        v-if="item.deduction_credit<=0 || (item.price!=item.deduction_credit&&item.price>0)">￥</span>
                  <span class="num"
                        v-if="item.deduction_credit<=0 || (item.price!=item.deduction_credit&&item.price>0)">{{item.price}}</span>
                </span>
                <span v-if="item.price>0&&item.deduction_credit>0&&item.price!=item.deduction_credit"
                      class="jh"></span>
                <span v-if="item.deduction_credit"
                      :class="item.deduction_credit_type==1?'jb_icon':'yb_icon'">
                  {{item.deduction_credit}}
                  <span class="icon"></span>
                </span>

              </div>
              <span class="ms_icon"
                    v-if="item.activity_status == 2">秒杀</span>
            </div>
          </div>
        </div>
        <div class="plus"
             v-if="item.activity_status!== 2 && item.plus_title">
          <img src="https://img.ameimeika.com/h5_images/lifebeauty/plus_tag.png"
               alt
               class="tag" />
          {{item.plus_title}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      score: 4
    };
  },
  components: {},
  methods: {
    doc_detail (item) {
      wx.navigateTo({
        url: "/pages/package_mall/goods_detail/main?goods_id=" + item.id
      });
    }
  },
  props: ["goods_list"],
  created () { }
};
</script>

<style lang="less" scoped>
.container-goods {
  .plus {
    width: 100%;
    height: 18px;
    line-height: 22px;
    color: #666666;
    font-size: 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    margin-top: 12px;
    .tag {
      width: 29px;
      height: 16px;
      margin-right: 4px;
    }
  }
  .goods-list {
    padding: 0 10px;
    .goods_deatails {
      display: flex;
      flex-direction: row;
    }
    .list-item {
      padding: 12px 10px;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
      border-radius: 5px;
      margin-bottom: 10px;
      position: relative;
      .left {
        width: 85px;
        height: 85px;
        position: relative;
        .goods-logo {
          width: 100%;
          height: 100%;
          border-radius: 5px;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 5px;
          }
        }
        .tip {
          width: 48px;
          height: 20px;
          font-size: 10px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
          text-align: right;
          padding-right: 2px;
          position: absolute;
          bottom: 3px;
          right: 0;
          background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/goods-tip.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .info {
        flex: 1;
        padding-left: 10px;
        position: relative;
        .goods-name {
          font-size: 14px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          .icon {
            width: 40px;
            height: 14px;
            display: inline-block;
            background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .plus {
          float: left;
          padding: 0 5px;
          margin: 4px 0;
          line-height: 16px;
          font-size: 10px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .price-right {
          font-size: 12px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
          margin-top: 4px;
        }
        .price {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          padding-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          .ms_icon {
              padding: 0 2px;
              height: 12px;
              background: rgba(255, 56, 62, 0.08);
              border-radius: 2px;
              font-size: 9px;
              font-weight: 400;
              color: rgba(255, 56, 62, 1);
            }
          .price-left {
            display: flex;
            align-items: center;
            .icon {
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(255, 56, 62, 1);
              line-height: 18px;
            }
            .num {
              font-size: 16px;
              font-family: "STHeitiTC-Medium";
              font-weight: 500;
              color: rgba(255, 56, 62, 1);
              line-height: 20px;
            }
            .jh {
              width: 6px;
              height: 6px;
              background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/jyb_add.png")
                center center no-repeat;
              background-size: 6px 6px;
              margin: 0 3px;
            }
            
            .jb_icon {
              font-size: 16px;
              font-weight: 500;
              color: rgba(245, 208, 64, 1);
              display: flex;
              align-items: center;
              .icon {
                width: 15px;
                height: 15px;
                background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/gold_icon.png")
                  0 center no-repeat;
                background-size: 15px 15px;
                margin-left: 1px;
                margin-top: -1px;
              }
            }

            .yb_icon {
              font-size: 16px;
              font-weight: 500;
              color: rgba(190, 204, 206, 1);
              display: flex;
              align-items: center;
              .icon {
                width: 15px;
                height: 15px;
                background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/silver_icon.png")
                  0 center no-repeat;
                background-size: 15px 15px;
                margin-left: 1px;
                margin-top: -1px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

